Skip to main content

Protótipo da Interface de Usuário

 Durante a Sprint 2, o grupo Cannabot deu início ao processo de desenvolvimento de um ambiente dedicado ao acompanhamento e controle dos dados coletados pela solução proposta. Esta etapa visa possibilitar aos usuários monitorar o desempenho do robô, além de oferecer a capacidade de controle remoto, quando necessário.

 Com base nas user stories e personas definidas durante a Sprint 2, identificaram-se as necessidades dos usuários e os elementos de funcionamento essenciais que devem estar inseridas na interface a ser desenvolvida. Para facilitar a visualização e entendimento desses elementos, optou-se por criar inicialmente o Wireframe, que é uma representação esquemática e simplificada da interface, destacando sua estrutura, funcionalidades e disposição dos elementos. Em seguida, foi elaborado o Mockup - uma representação mais fiel e detalhada da interface, incluindo elementos visuais como cores, tipografia e imagens, proporcionando uma prévia mais realista do produto final.

Esse desenvolvimento pode ser acompanhado a seguir:

Wireframe

 A seguir, é possível acompanhar o fluxo das telas e suas funcionalidades

 O início da interface priorizou o acesso à plataforma. Com essa premissa, foram concebidas as telas de cadastro e login do usuário.

Tela de Cadastro - Wireframe Fonte: Elaborado pelo grupo Cannabot

Tela de Login - Wireframe Fonte: Elaborado pelo grupo Cannabot

 Após o login, o usuário é redirecionado para a tela inicial (Histórico de Dados) da plataforma, que disponibiliza o último heatmap (mapa de calor) gerado pela coleta de dados do robô, ao lado, têm-se uma tabela com quatro colunas sendo elas: data, hora, localização e temperatura, informações coletadas e salvas pela solução. Ademais, a interface possui um menu lateral persistente em todas as telas do site, facilitando a navegação sem a necessidade de retornar à tela inicial repetidamente.

Histórico de Dados - Wireframe Fonte: Elaborado pelo grupo Cannabot

Histórico de Dados e Menu - Wireframe Fonte: Elaborado pelo grupo Cannabot

Ao selecionar "Central de Controle", o usuário é conduzido à tela de acompanhamento do desempenho do robô no modo autônomo. Nessa tela, é possível visualizar a transmissão ao vivo da imagem capturada pelo robô, juntamente com a temperatura registrada pelo seu sensor. Ademais, há o botão de "Modo de emergência", permitindo a interrupção imediata da operação do robô.

Central de Controle Automática - Wireframe Fonte: Elaborado pelo grupo Cannabot

Para alternar entre o modo autônomo e o modo manual (teleoperado), basta ao usuário acionar o switch, direcionando-o para outra tela com as mesmas funcionalidades, acrescidas do controle remoto para manipular o movimento do robô.

Central de Controle Manual - Wireframe Fonte: Elaborado pelo grupo Cannabot

Ao clicar em "Registros de Uso", o usuário é encaminhado a uma tela que apresenta uma tabela com informações sobre usuário, data e hora de acesso à plataforma, proporcionando um controle eficiente do processo.

Central de Controle Manual - Wireframe Fonte: Elaborado pelo grupo Cannabot

E por fim, ao clicar em "Histórico de Dados", o usuário retorna para à página inicial.

Histórico de Dados - Wireframe Fonte: Elaborado pelo grupo Cannabot

Mockup

Depois de elaborado o wireframe, o grupo prototipou o Mockup de alta fidelidade. O fluxo se inicia pela tela de cadastro, caso seja um novo usuário:

Tela de Cadastro - Mockup Fonte: Elaborado pelo grupo Cannabot

Ou através da tela de login se já for um usuário cadastrado:

Tela de Login - Mockup Fonte: Elaborado pelo grupo Cannabot

Então, o fluxo prossegue para a tela de home, que exibe o histórico de dados:

Histórico de Dados - Mockup Fonte: Elaborado pelo grupo Cannabot

Todas as telas também acompanham a seguinte sidebar:

Sidebar - Mockup Fonte: Elaborado pelo grupo Cannabot

Usando a sidebar para navegar até a central de controle, a seguinte tela - Central de Controle Autônomo - é exibida:

Central de Controle Autonômo - Mockup Fonte: Elaborado pelo grupo Cannabot

Se utilizado a função de desativar o modo autônomo, a visualização muda para:

Central de Controle Manual - Mockup Fonte: Elaborado pelo grupo Cannabot

Ainda através da sidebar, o usuário pode navegar para os registros de uso:

Registros de Uso - Mockup Fonte: Elaborado pelo grupo Cannabot

E novamente, o fluxo acaba na tela de histórico de dados (home):

Histórico de Dados - Mockup Fonte: Elaborado pelo grupo Cannabot